<template>
    <view class="box" :style="{ height: wh }">
        <div class="card" :style='{ height }' style="background-color: #f8bc0f;" @click="goLogin('driver')">
            <img src="../static/images/login/car.png" style="height: 60%;width: 60%;" alt="" />
            <div style="position: absolute;font-size: 16px;bottom: 10px;right: 10px;">司机</div>
        </div>
        <div class="card" :style='{ height }' style="background-color: #0c89da;" @click="goLogin('captain')">
            <img src="../static/images/login/ship.png" style="height: 60%;width: 60%;" alt="" />
            <div style="position: absolute;font-size: 16px;bottom: 10px;right: 10px;">船长</div>
        </div>
    </view>
</template>

<script lang="ts" setup>
import {
    useUserStore
} from "@/store/modules/user"
import {
    showConfirm
} from '@/utils/common'

/* 数据 */
const {
    SETLOGINROLE
} = useUserStore()
const wh = uni.getWindowInfo().windowHeight + 'px'
const height = Math.round(uni.getWindowInfo().windowHeight * 0.3) + 'px'


/* 函数 */
const goLogin = async (role: string) => {
    let res = await showConfirm(`您选择的是${role === 'driver' ? '司机' : '船长'}，接下来登录或注册都是使用该角色，您确认选择该角色吗？`)
    if(!res.confirm) return
    SETLOGINROLE(role)
    uni.reLaunch({
        url: '/pages/codeLogin?roleCode=' + role
    })
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 10% 20px;

    .card {
        border-radius: 10px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
    }
}
</style>